<template>
  <div style="padding:3%">
      <el-row>
          <el-col :span="12">
              <el-form :model="form" :rules="rules" ref="keyCarForm" label-width="200px">
                <el-form-item v-for="(v,k,i) in form" :label="labels[i]" :key="i" v-if="k!=='netGridName'&&k!=='vechiclesTypeName'" :prop="k">
                    <el-input v-if="k=='keyVehiclesID'" disabled v-model="form[k]"></el-input>
                    <el-select v-else-if="k=='vechiclesTypeValue'" v-model="form[k]">
                        <el-option v-for="vs in carType" :key="vs.vechiclesTypeValue" :value="vs.vechiclesTypeValue" :label="vs.vechiclesTypeName"></el-option>
                    </el-select>
                    <el-select v-else-if="k=='netGridID'" v-model="form[k]">
                        <el-option v-for="v in netGridType" :key="v.id" :value="v.netGridID" :label="v.netGridName"></el-option>
                    </el-select>
                    <el-input autosize v-else-if="k=='remarks'||k=='insuranceInf'||k=='yearCheckInf'" v-model="form[k]" type="textarea"></el-input>
                    <el-input v-else v-model="form[k]"></el-input>
                </el-form-item>
                <el-form-item align="center">
                    <el-button type="primary" @click="updateRecord">更新</el-button>
                </el-form-item>
              </el-form>
          </el-col>
      </el-row>
  </div>
</template>

<script>
import * as api2 from "@/api/videoManage";
import * as api from "@/api/trafficManage";

export default {
  data() {
    return {
      num: 4,
      form: {
        keyVehiclesID:'1',
        vehiclesHolderCertID: "320683", //'车主身份证号',
        vehiclesHolderName: "张三", //'车主姓名',
        vechiclesNumber: "9889", //'车牌号码',
        vechiclesTypeValue: "02", //'车辆类型编码，具体待确认。',
        insuranceInf: "", //'保险情况',
        enterpriseUSCcode: "", //'如果登记在企业内，则填入企业统一社会信用代码；如果是个人，该字段留空',
        yearCheckInf: "", //'年检情况',
        netGridID: 1, //'登记地或所属企业地的所在网格号。',
        contact: "123213", //'联系方式，电话等',
        remarks: "" //varchar(500),
      },
      labels: ["编号","车主身份证号","车主姓名", "车牌号码", "车辆类型", '保险情况','统一社会信用代码','年检情况',"所属网格", "联系方式",'备注'],
      netGridType: [],
      carType:[],
      rules:{
        vehiclesHolderCertID:[
          //  { required: true, message: '身份证不得为空!', trigger: 'blur' },
        ]
      }
    };
  },
  methods: {
    updateRecord() {
      api.updateKeyVehicle(this.form).then(res => {
        if (res.data) {
          this.$message({
            type: "success",
            message: "更新成功!"
          });
          this.$router.push({path:'index'})
        } else {
          this.$message({
            type: "error",
            message: res.message
          });
        }
      });
    }
  },
  mounted() {
    let id = this.$route.query.id;
    api.fetchDetailByID(id).then(res => {
      this.form = res.data.detail;
    });
    api2.fetchNetGrid().then(res => {
      this.netGridType = res.data;
    });
     api.fetchVechiclesCode().then(res=>{
      this.carType = res.data
    })
  }
};
</script>

<style scoped>

</style>
